<template>
  <div class="post-detail-container">
    <el-button type="text" class="back-button" @click="goBack">返回</el-button>
    <div class="search-bar">
      <el-input v-model="searchQuery" placeholder="搜索美食" @keyup.enter="searchPosts"></el-input>
      <el-select v-model="selectedCategory" placeholder="请选择分类">
        <el-option v-for="category in categories" :key="category.id" :label="category.name" :value="category.name"></el-option>
      </el-select>
      <el-button type="primary" @click="searchPosts">搜索</el-button>
    </div>

    <!-- 菜品列表 -->
    <el-card class="post-card" v-for="post in paginatedPosts" :key="post.id">
      <h2>{{ post.name }}</h2>
      <el-image :src="require(`../assets/uploads/${post.image}`)" fit="cover" alt="美食图片"
                style="width: 35%; height: auto; border-radius: 4px; margin-top: 10px;"></el-image>
      <div class="card-content">
        <p>{{ post.description }}</p>
        <p>类型: {{ post.typeName }}</p>
        <el-button type="text" @click="goToCanteen(post.canteenId)">{{ post.canteenName }}</el-button>
      </div>
    </el-card>

    <!-- 分页组件 -->
    <el-pagination
        background
        layout="prev, pager, next"
        :total="filteredPosts.length"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="handlePageChange"
        style="margin-top: 20px;"
    ></el-pagination>

    <!-- 无数据提示 -->
    <div v-if="filteredPosts.length === 0">
      <p>没有找到相关美食</p>
    </div>
  </div>
</template>

<script>
import {ElCard, ElImage, ElInput, ElSelect, ElOption, ElButton, ElPagination} from 'element-plus';
import {GetDishByCondition, GetDishType} from '../api/index';

export default {
  name: 'DishList',
  components: {
    ElCard,
    ElImage,
    ElInput,
    ElSelect,
    ElOption,
    ElButton,
    ElPagination,
  },
  data() {
    return {
      searchQuery: '', // 搜索关键词
      selectedCategory: null, // 选择的分类
      categories: [], // 分类列表
      posts: [], // 所有查询到的菜品
      filteredPosts: [], // 过滤后的菜品
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页显示的数量
    };
  },
  computed: {
    // 计算当前页的数据
    paginatedPosts() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.filteredPosts.slice(start, end);
    },
  },
  mounted() {
    this.searchQuery = this.$route.query.q || '';
    this.fetchCategories();
    this.searchPosts();
  },
  methods: {
    // 获取分类
    async fetchCategories() {
      try {
        const response = await GetDishType();
        this.categories = response.data.data;
        console.log(this.categories);
      } catch (error) {
        console.error('Failed to fetch categories:', error);
      }
    },
    // 搜索菜品
    async searchPosts() {
      const dishDTO = {
        name: this.searchQuery,
        type: this.selectedCategory,
      };
      console.log(dishDTO)
      try {
        const response = await GetDishByCondition(dishDTO.type, dishDTO.name);
        this.posts = Array.isArray(response.data.data.dishes) ? response.data.data.dishes : [];
        this.filteredPosts = this.posts;
        this.currentPage = 1; // 重置页码
        console.log(this.filteredPosts);
      } catch (error) {
        console.error('Failed to fetch posts:', error);
        this.posts = [];
        this.filteredPosts = [];
      }
    },
    // 处理分页切换
    handlePageChange(page) {
      this.currentPage = page;
    },
    // 返回首页
    goBack() {
      this.$router.push('/tasteHome');
    },
    // 跳转到餐厅详情页
    goToCanteen(canteenId) {
      this.$router.push(`/canteenInfo/${canteenId}`);
    },
  },
};
</script>

<style scoped>
.post-detail-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.post-card {
  margin-bottom: 20px;
}

.card-content {
  padding: 10px;
}

.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.search-bar .el-input {
  flex: 1;
  margin-right: 10px;
}

.search-bar .el-select {
  flex: 1;
  margin-right: 10px;
}
</style>
